import React, { Component } from 'react'
import { Input, Select, Button } from 'antd'
import ReactWEditor from 'wangeditor-for-react'
import { getExamType, getSubject, getQuestionsType, postQuestions } from '../../api/exam'
import MySelect from './components/MySelect'

const { Option } = Select

export default class AddQuestions extends Component {
    state = {
        questionInfo: {
            // 试题的标题
            title: "",
            // 题目主题
            questions_stem: "",
            // 考试类型id
            exam_id: "",
            // 课程Id
            subject_id: "",
            // 题目类型
            questions_type_id: "",
            // 题目答案
            questions_answer: "",
            // 用户id
            user_id: JSON.parse(sessionStorage.getItem('userInfo')).user_id
        },
        // 考试类型
        examType: [],
        // 课程类型
        subject: [],
        // 题目类型
        questionsType: []
    }
    // 添加试题
    submit = () => {
        console.log(this.state.questionInfo)
        // postQuestions(this.state.questionInfo).then(res => {
        //     console.log(res.data)
        // })
    }

    fn = (value) => {
        this.state.questionInfo.exam_id = value
    }

    fn2 = (value) => {
        this.state.questionInfo.subject_id = value
    }

    fn3 = (value) => {
        this.state.questionInfo.questions_type_id = value
    }
    
    render() {
        // console.log(this.state.questionInfo)
        const { questionInfo, examType, subject, questionsType } = this.state
        return (
            <React.Fragment>
                <h3>
                    题目信息
                </h3>
                <ul>
                    <li>
                        <p>
                            题干
                        </p>
                        <Input value = { questionInfo.title } onChange = {(ev) => {
                            const questionInfo = { ...this.state.questionInfo }
                            questionInfo.title = ev.target.value
                            this.setState({
                                questionInfo
                            })
                        }}/>
                    </li>
                    <li>
                        <p>
                            题目主题
                        </p>
                        <ReactWEditor
                            onBlur={(html) => {
                                this.state.questionInfo.questions_stem = html
                            }}
                        />
                    </li>
                    <li>
                        <p>
                            请选择考试类型：
                        </p>
                        <MySelect list = { examType } defaultValue = "周考一" change = { this.fn }/>
                        {/* <Select defaultValue="周考1" style={{ width: 120 }} onChange={ this.handleChange }>
                            {
                                examType.map(item => {
                                    return <Option key = { item.exam_id } value = { item.exam_id }>
                                        { item.exam_name }
                                    </Option>
                                })
                            }
                        </Select> */}
                    </li>
                    <li>
                        <p>
                            请选择课程类型：
                        </p>
                        <MySelect list = { subject } defaultValue = "javaScript上" change = { this.fn2 }/>
                        {/* <Select defaultValue="javaScript上" style={{ width: 120 }} onChange={  this.handleChangeSubject }>
                            {
                                subject.map(item => {
                                    return <Option key = { item.subject_id } value = { item.subject_id }>
                                        { item.subject_text }
                                    </Option>
                                })
                            }
                        </Select> */}
                    </li>
                    <li>
                        <p>
                            请选择题目类型：
                        </p>
                        <MySelect list = { questionsType } defaultValue = "简单题" change = { this.fn3 }/>
                        {/* <Select defaultValue="简单题" style={{ width: 120 }} onChange={ this.handleChangeTypeId }>
                            {
                                questionsType.map(item => {
                                    return <Option key = { item.questions_type_id } value = { item.questions_type_id }>
                                        { item.questions_type_text }
                                    </Option>
                                })
                            }
                        </Select> */}
                    </li>
                    <li>
                        <h3>
                            答案信息
                        </h3>
                        <ReactWEditor
                            onChange={(html) => {
                                this.state.questionInfo.questions_answer = html
                            }}
                        />
                    </li>
                    <li>
                        <Button onClick = {() => {
                            this.submit()
                        }} type="primary">提交</Button>
                    </li>
                </ul>
            </React.Fragment>
        )
    }
    componentDidMount() {
        this.setState({
            [msg]: "123"
        })

        // 获取所有的考试类型
        getExamType().then(res => {
            // try
            this.setState({
                examType: res.data.data
            })
        })
        // 获取所有的课程类型
        getSubject().then(res => {
            this.setState({
                subject: res.data.data
            })
        })
        // 获取所有的题目类型
        getQuestionsType().then(res => {
            this.setState({
                questionsType: res.data.data
            })
        })
    }
}
